<template>
	<view class="wrap">
		<view class="grid">
			<uni-section title="分类" type="line" padding>
				<uni-grid @change="changeGrid" :column="4" :highlight="true">
					<uni-grid-item v-for="(item, index) in gridList" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image class="pic" :src="item.url" mode=""></image>
							<text class="text">{{item.name}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
		<view class="actPic">
			<image show-menu-by-longpress :src="url" mode=""></image>
		</view>
		<view class="tip_text">
			长按图片可以保存
		</view>
		<uni-load-more v-if='isShow' status="loading"></uni-load-more>

	</view>
</template>

<script>
	export default {
		mounted() {
			this.getImgUrl('男');
			this.isShow = false;
		},
		data() {
			return {
				isShow:true,
				url: "",
				gridList: [{
						name: '男',
						value: 0,
						url: "../../static/img/headPortrait/male.png"
					},
					{
						name: '女',
						value: 1,
						url: "../../static/img/headPortrait/female.png"
					},
					{
						name: '动漫男',
						value: 2,
						url: "../../static/img/headPortrait/cartoon_male.png"
					},
					{
						name: '动漫女',
						value: 3,
						url: "../../static/img/headPortrait/cartoon_female.png"
					},
				]

			}
		},
		methods: {
			async getImgUrl(classify) {
				this.isShow = true;
				let res = await uni.request({
					url: `https://api.uomg.com/api/rand.avatar?sort=${classify}&format=json`,
					method: 'GET'
				})
				this.url = 'https://images.weserv.nl/?url=' + res.data.imgurl;
				this.isShow = false;
			},
			changeGrid(e) {
				const {
					index
				} = e.detail;
				this.getImgUrl(this.gridList[index].name)
			}

		}
	}
</script>

<style lang="scss">
	.actPic {
		width: 100%;
		margin: 0 auto;

		image {
			margin-top: 40rpx;
			margin-left: 120rpx;
			width: 67%;
		}
	}

	.tip_text {
		margin: 0 auto;
		font-size: 45rpx;
		margin-top: 40rp;
		margin-left: 200rpx;
	}

	.pic {
		width: 65rpx;
		height: 65rpx;
	}


	.text {
		font-size: 14px;
		margin-top: 5px;
	}




	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>